export default {
    data() {
        return {
            swiper_id:0,
            type:1,
            store_id:0,
            ruleForm: {
                name: '',
                postData: {},
                sort: '',
                link:'',
                radio:"1",
            },
            rules: {
                name: [
                    { required: true, message: '请输入图片名称', trigger: 'blur' },
                ],
            },
            imgList:[],				//图片列表
            postData: {},			//七牛云postData
            descImageUrl:'',		//图片
            desc_img:false,			//是否展示删除
            domain:'',				//图片域名
        }
    },

    //进入页面加载
    mounted: function() {
        var that = this;
        //在缓存中获取值
        that.user_name = sessionStorage.getItem("user_name");
        that.user_id = sessionStorage.getItem("user_id");
        that.token = sessionStorage.getItem("access-token");
        if((!that.token) || (!that.user_id) || (!that.user_name)) {
            that.$router.push('/login');
        }
        //加载轮播详情
        if(that.$route.query.swiper_id) {
            that.swiper_id = that.$route.query.swiper_id;
            that.detail();
        }
        //获取七牛云token
        that.getQiNiuToken();
    },

    //方法
    methods: {
        //请求api
        submitForm(formName) {
            var that = this;
            this.$refs[formName].validate((valid) => {
                if(valid) {
                    if(that.swiper_id === 0) {
                        that.addCitySwiper();
                    } else {
                        that.editCitySwiper();
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        /**
         * 获取七牛token
         */
        getQiNiuToken: function () {
            var that = this;
            //请求登陆接口
            that.$http.post(that.adminApi.api_url + "/Qiniu/getToken", {
                token: that.token,
            }, {
                emulateJSON: true
            }).then(
                function (res) {
                    // 处理成功的结果
                    that.postData = {
                        token: res.body.upToken,
                    }
                    that.domain = res.body.domain;
                },
                function () {
                    // 处理失败的结果
                    that.$message({
                        type: 'error',
                        message: `操作提示: ${ '处理异常' }`
                    });
                });
        },

        //上传图片
        /**
         * 删除
         * @param file
         * @param fileList
         */
        descRemove(file, fileList) {
            var that = this;
            that.imgList = fileList;
        },
        descPictureCardPreview(file) {
            this.descImageUrl = file.url;
            this.desc_img = true;
        },
        /**
         * 显示错误
         * @param res
         */
        descError(res) {
            console.log(res)
        },
        /**
         * 上传成功后在图片框显示图片
         * @param res
         * @param file
         */
        descAvatarSuccess(res, file) {
            var that = this;
            var imageUrl = {
                url: that.domain + res.key,
                uid:file['raw']['uid']
            };
            that.imgList.push(imageUrl);
        },
        /**
         * 文件超出个数限制时的钩子
         * @param files
         * @param fileList
         */
        descExceed(files, fileList) {
            this.$message.error('只能上传一张图片');
        },

        /**
         * 添加
         * @returns {boolean}
         */
        addCitySwiper:function () {
            var that = this;

            if(that.imgList.length === 0){
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '请上传图片' }`
                });
                return false;
            }
            //请求的数据
            var formData = {};
            formData.token = that.token;
            formData.user_id = that.user_id;
            formData.picture = that.imgList[0]['url'];
            if(that.ruleForm.link) {
                formData.url = that.ruleForm.link;
            }
            formData.sort = that.ruleForm.sort;
            formData.status = that.ruleForm.radio;
            formData.title = that.ruleForm.name;
            formData.user_id = that.user_id;

            //请求api
            that.$http.post(that.adminApi.api_url + "/Bannerimg/add", formData, {
                emulateJSON: true
            }).then(
                function(res) {
                    // 处理成功的结果
                    that.$message({
                        type: 'success',
                        message: `操作提示: ${ '添加成功' }`
                    });
                    that.$router.back(-1);
                },
                function() {
                    // 处理失败的结果
                    that.$message({
                        type: 'error',
                        message: `操作提示: ${ '处理异常' }`
                    });
                });
        },

        /**
         * 详情
         */
        detail:function () {
            var that = this;
            //请求的数据
            var formData = {};
            formData.token = that.token;
            formData.id = that.swiper_id;

            //请求邀请者列表
            that.$http.post(that.adminApi.api_url + "/bannerimg/show_edit", formData, {
                emulateJSON: true
            }).then(
                function(res) {
                    that.ruleForm.name=res.body.title;
                    that.ruleForm.sort=res.body.sort;
                    that.ruleForm.link=res.body.url;
                    that.ruleForm.radio=res.body.status.toString();
                    that.imgList.push({
                        url: res.body.picture,
                    })
                },
                function() {
                    // 处理失败的结果
                    that.$message({
                        type: 'error',
                        message: `操作提示: ${ '处理异常' }`
                    });
                });
        },

        /**
         * 修改
         * @returns {boolean}
         */
        editCitySwiper:function () {
            var that = this;
            if(that.imgList.length === 0){
                that.$message({
                    type: 'error',
                    message: `操作提示: ${ '请上传图片' }`
                });
                return false;
            }

            //请求的数据
            var formData = {};
            formData.token = that.token;
            formData.type = that.type;
            formData.user_id = that.user_id;
            formData.id = that.swiper_id;
            formData.picture = that.imgList[0]['url'];
            if(that.ruleForm.link) {
                formData.url = that.ruleForm.link;
            }
            formData.sort = that.ruleForm.sort;
            formData.status = that.ruleForm.radio;
            formData.title = that.ruleForm.name;
            formData.user_id = that.user_id;

            //请求API
            that.$http.post(that.adminApi.api_url + "/bannerimg/edit", formData, {
                emulateJSON: true
            }).then(
                function(res) {
                    // 处理成功的结果
                    that.$message({
                        type: 'success',
                        message: `操作提示: ${ '修改成功' }`
                    });
                    that.$router.back(-1);
                },
                function() {
                    // 处理失败的结果
                    that.$message({
                        type: 'error',
                        message: `操作提示: ${ '处理异常' }`
                    });
                });
        },

        //返回
        cancel:function () {
            var that = this;
            that.$router.back(-1);
        },
    }
}